<template>
	<div class="preview-bd">
		<ul class="tab">
			<li v-for="(item,index) in list" @click="change(item.aid,item.url,index)" :class="[{'active':value==index}]">文档{{index+1}}</li>
		</ul>
		<preview-json ref="preview_json" />
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					aid: '524735219',
					url: 'http://max.book118.com/file_down/e06f1ddf5827db0f0b9b294988b6d30a.docx'
				}, {
					aid: '524735221',
					url: 'http://max.book118.com/file_down/1111889f4a56557db87324b9002acd1d.doc'
				}, {
					aid: '524735218',
					url: 'http://file-1.book118.com/nsr31/M01/1C/28/wKh2EGPF9JyAOcLzAAEesF7GEsk68.docx'
				}, {
					aid: '524735220',
					url: 'http://max.book118.com/file_down/4cc1247d8d616207d9154868416e3814.docx'
				}],
				value: 3
			}
		},
		onReady() {
			this.change(this.list[this.value].aid, this.list[this.value].url, this.value);
		},
		methods: {
			change(aid, url, index) {
				this.value = index;
				window.previewJson.initParams({
					aid,
					url,
					s: 0,
					e: 50,
					z: 50
				}).then(() => {
					window.previewJson.init();
				})
			}
		}
	}
</script>
<style scoped>
	.tab {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.tab li {
		padding: 10px 20px;
		list-style: none;
	}
	.active {
		color: #2878ff;
	}
</style>
